<template>
  <div class="container">
    <div class="content-wrapper">
      <div class="header-section">
        <h1 class="title">声音克隆管理</h1>
        <div class="filter-section">
          <div class="tag-group">
            <div 
              v-for="(tag, index) in tags"
              :key="index"
              class="tag-item"
              :class="{ 'tag-active': selectedTag === tag.value }"
              @click="handleTagClick(tag.value)"
            >
              {{ tag.label }}
            </div>
          </div>
          <div class="search-input">
            <el-input
              v-model="searchQuery"
              placeholder="搜索声音名称"
              prefix-icon="el-icon-search"
            />
          </div>
        </div>
      </div>

      <div class="voice-grid">
        <div 
          v-for="voice in filteredVoices"
          :key="voice.id"
          class="voice-card"
        >
          <div class="card-content">
            <div class="card-header">
              <h3 class="voice-name">{{ voice.name }}</h3>
              <el-tag :type="getTagType(voice.type)">{{ voice.type }}</el-tag>
            </div>
            <div class="create-time">生成时间：{{ voice.createTime }}</div>
            <div class="card-actions">
              <div class="left-actions">
                <el-button 
                  type="primary"
                  icon="el-icon-video-play"
                  class="action-btn"
                  @click="playVoice(voice)"
                >
                  试听
                </el-button>
                <el-button 
                  v-if="currentPlayingId === voice.id"
                  type="info"
                  :icon="pause ? 'el-icon-video-pause' : 'el-icon-video-play'"
                  class="action-btn"
                  @click="togglePause"
                >
                  {{ pause ? '继续' : '暂停' }}
                </el-button>
              </div>
              <div class="right-actions">
                <el-button 
                  type="danger"
                  icon="el-icon-delete"
                  class="action-btn"
                  @click="deleteVoice(voice.id)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { label: '全部', value: 'all' },
        { label: '男生', value: '男生' },
        { label: '女生', value: '女生' },
        { label: '儿童', value: '儿童' }
      ],
      voices: [
        {
            id: 1,
            name: '张雨绮',
            type: '女生',
            createTime: '2024-01-15 14:30',
            audioUrl: 'https://example.com/audio1.mp3'
          },
          {
            id: 2,
            name: '刘德华',
            type: '男生',
            createTime: '2024-01-14 09:15',
            audioUrl: 'https://example.com/audio2.mp3'
          },
          {
            id: 3,
            name: '小明明',
            type: '儿童',
            createTime: '2024-01-13 16:45',
            audioUrl: 'https://example.com/audio3.mp3'
          },
          {
            id: 4,
            name: '周杰伦',
            type: '男生',
            createTime: '2024-01-12 11:20',
            audioUrl: 'https://example.com/audio4.mp3'
          },
          {
            id: 5,
            name: '林志玲',
            type: '女生',
            createTime: '2024-01-11 13:50',
            audioUrl: 'https://example.com/audio5.mp3'
          },
          {
            id: 6,
            name: '小童童',
            type: '儿童',
            createTime: '2024-01-10 15:25',
            audioUrl: 'https://example.com/audio6.mp3'
          }
      ],
      selectedTag: 'all',
      searchQuery: '',
      currentPlayingId: null,
      pause: false
    }
  },
  computed: {
    filteredVoices() {
      return this.voices.filter(voice => {
        const matchesTag = this.selectedTag === 'all' || voice.type === this.selectedTag
        const matchesSearch = voice.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        return matchesTag && matchesSearch
      })
    }
  },
  methods: {
    handleTagClick(tag) {
      this.selectedTag = tag
    },
    getTagType(type) {
      switch (type) {
        case '男生': return 'primary'
        case '女生': return 'success'
        case '儿童': return 'warning'
        default: return 'info'
      }
    },
    playVoice(voice) {
      this.currentPlayingId = voice.id
      this.pause = false
      this.$message.success(`正在播放: ${voice.name}`)
    },
    togglePause() {
      this.pause = !this.pause
      this.$message.success(this.pause ? '已暂停' : '继续播放')
    },
    deleteVoice(id) {
      this.voices = this.voices.filter(voice => voice.id !== id)
      this.$message.success('删除成功')
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f9fafb;
  padding: 32px 0;
}

.content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.header-section {
  margin-bottom: 32px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-group {
  display: flex;
  gap: 16px;
}

.tag-item {
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: white;
  color: #374151;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.tag-item:hover {
  background-color: #f3f4f6;
}

.tag-active {
  background-color: #2563eb;
  color: white;
  border-color: #2563eb;
}

.tag-active:hover {
  background-color: #1d4ed8;
}

.search-input {
  position: relative;
}

.search-input .el-input {
  width: 240px;
}

.voice-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .voice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .voice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.voice-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.voice-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.voice-name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.create-time {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 24px;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  border-radius: 8px !important;
}

.el-input__inner {
  height: 40px;
  padding-left: 40px !important;
}

.el-input__prefix {
  left: 12px !important;
}
</style>